<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(v, k) in gallery" :key="k">
        <img :src="v.img_url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 轮播图下面的提示 -->
    <ul class="detail_tip">
      <li>
        <van-icon name="checked" color="#8b0000" />
        30天无忧退货
      </li>
      <li>
        <van-icon name="checked" color="#8b0000" />
        48小时快速退费
      </li>
      <li>
        <van-icon name="checked" color="#8b0000" />
        满88元免邮费
      </li>
    </ul>
    <!-- 轮播下面的产品标题 -->
    <div class="detail_pro">
      <div class="detail_title">
        <h3>{{ name }}</h3>
        <p>{{ goods_brief }}</p>
        <span>{{ retail_price | fil }}</span>
      </div>
    </div>
    <!-- 弹出层 -->
    <van-cell is-link @click="showPopup">展示弹出层</van-cell>
    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
      <van-card
        currency=""
        :price="this.retail_price | fil"
        :desc="this.goods_number"
        title="库存"
        :thumb="this.list_pic_url"
      />
      <div class="stepper_content">
        <h5>数量:</h5>
        <van-stepper v-model="value" min="1" max="8" disable-input />
      </div>
    </van-popup>

    <!-- 商品参数 -->
    <div class="attribute">
      <h3>商品参数</h3>
      <ul class="attribute_list">
        <li v-for="(v, k) in attribute" :key="k">
          <span>{{ v.name }}</span>
          <div class="van-ellipsis">{{ v.value }}</div>
        </li>
      </ul>
    </div>

    <!-- 相关产品 -->
    <div v-html="this.goods_desc"></div>

    <!-- 常见问题 -->
    <div class="Question">
      <van-divider
        :style="{ color: '#333', borderColor: '#999', padding: '0.6rem 7rem' }"
      >
        常见问题
      </van-divider>
      <ul class="Question_list">
        <li v-for="v in issue" :key="v.id">
          <h3>{{ v.question }}</h3>
          <p>
            {{ v.answer }}
          </p>
        </li>
      </ul>
    </div>

    <!-- 相关产品 -->
    <div class="aboutProduct">
      <van-divider
        :style="{ color: '#333', borderColor: '#999', padding: '0.6rem 7rem' }"
      >
        相关产品
      </van-divider>
      <ul class="aboutProduct_list">
        <li v-for="v in goodsList" :key="v.id">
          <img :src="v.list_pic_url" alt="" />
          <h5>{{ v.name }}</h5>
          <p>{{ v.retail_price | fil }}</p>
        </li>
      </ul>
    </div>
    <!-- 购买商品导航 -->
    <van-goods-action>
      <!--  <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" /> -->
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :badge="this.goodsCount"
        @click="tiao1()"
      />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="Tan()"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
import { GetGoodsDetail, GetGoodsRelated } from "@/request/api";
export default {
  name: "H559Goodsdetail",

  components: {},

  directives: {},

  data() {
    return {
      id: "",
      value: 1,
      gallery: "",
      name: "",
      goods_brief: "",
      retail_price: "",
      show: false,
      list_pic_url: "",
      goods_number: "",
      attribute: "",
      goods_desc: "",
      issue: "",
      goodsList: "",
      token: "",
      goodsCount: "",
      brand_id: "",
      errno: "",
    };
  },

  mounted() {},
  computed: {},
  methods: {
    showPopup() {
      this.show = true;
    },
    count() {
      this.token = localStorage.getItem("tok");
      // console.log(this.token);
      axios
        .get("api/cart/goodscount", {
          headers: {
            "X-Nideshop-Token": this.token,
          },
        })
        .then((res) => {
          // console.log(res);
          this.goodsCount = res.data.data.cartTotal.goodsCount;
          // console.log(this.goodsCount);
          return this.goodsCount;
        });
    },
    Tan() {
      if (this.token) {
        if (!this.show) {
          this.show = true;
        } else {
          this.show = !this.show;
          console.log(this.id, this.brand_id, this.value);
          axios
            .post(
              "/api/cart/add",
              {
                goodsId: this.id,
                productId: this.brand_id,
                number: this.value,
              },
              {
                headers: { "X-Nideshop-Token": this.token },
              }
            )
            .then((res) => {
              // console.log(res);
              this.errno = res.data.errno;
              // console.log(this.errno);
              if (this.errno == 0) {
                Toast.success("添加成功");
                this.count();
              } else {
                Toast.fail("库存不足");
              }
            });
        }
      } else {
        Toast.fail("请先登录");
        setTimeout(() => {
          this.$router.push("/person");
        }, 1000);
      }
    },
    tiao1() {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 250,
      });
      this.$router.push("/gcar");
    },
  },
  created() {
    // console.log(this.$route.query.id);
    this.id = this.$route.query.id;
    GetGoodsDetail({ id: this.id }).then((res) => {
      // console.log(res);
      this.gallery = res.data.gallery;
      this.name = res.data.info.name;
      this.goods_brief = res.data.info.goods_brief;
      this.brand_id = res.data.productList[0].id;
      // console.log(this.brand_id);
      this.retail_price = res.data.info.retail_price;
      this.list_pic_url = res.data.info.list_pic_url;
      this.goods_number = String(res.data.info.goods_number);
      this.attribute = res.data.attribute;
      this.goods_desc = res.data.info.goods_desc;
      this.issue = res.data.issue;
    });
    GetGoodsRelated({ id: this.id }).then((res) => {
      // console.log(res);
      this.goodsList = res.data.goodsList;
    });

    // 加入购物车数量
    this.token = localStorage.getItem("tok");
    if (this.token) {
      axios
        .get("/api/cart/goodscount", {
          headers: {
            "X-Nideshop-Token": this.token,
          },
        })
        .then((res) => {
          // console.log(res);
          this.goodsCount = res.data.data.cartTotal.goodsCount;
        });
    } else {
      this.goodsCount = 0;
    }
  },

  filters: {
    fil(v) {
      v = Number(v);
      return "￥ " + v.toFixed(2) + "元";
    },
  },
};
</script>

<style lang="less" scoped>
</style>